<template>
    <div class="animated fadeIn">
        <Row style="text-align: right">
            <Date-picker type="daterange" :options="options1" placement="bottom-end" placeholder="选择日期" style="width: 200px" v-model="date"></Date-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;按</span>
            <Select v-model="findType" style="width:80px;text-align: left">
                <Option v-for="item in findTypeList" :value="item.type" :key="item">{{item.name}}</Option>
            </Select>
            <span>查看&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <i-button type="info" @click="find()" style="background: #64bec2">搜索</i-button>
        </Row>


        <Row type="flex" justify="space-between" class="code-row-bg" style="margin-top: 30px">
            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel purple">
                <div class="state-value">
                    <div class="value">
                        总发货码洋
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>

            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel red">
                <div class="state-value">
                    <div class="value">
                        总退货码洋
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>

            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel pink">
                <div class="state-value">
                    <div class="value">
                        总净发码洋
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>

            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel green">
                <div class="state-value">
                    <div class="value">
                        总发货数量
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>

            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel blue">
                <div class="state-value">
                    <div class="value">
                        总退货数量
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>

            <Col span="3" :lg="3" :md="6" :sm="12" :xs="24">
            <div class="panel mauve">
                <div class="state-value">
                    <div class="value">
                        总净发数量
                    </div>
                    <div class="title">
                        1,900,000
                    </div>
                </div>
            </div>
            </Col>
        </Row>


        <div class="title-label" style="margin-top:30px">各中心占比图例</div>
        <Row :gutter="16" style="background: #fff;padding: 30px 20px">
            <Col :lg="12" :md="12" :sm="24" :xs="24">
            <h4 style="color: #fff">各中心占比图例</h4>
            <dash-chart-visitor></dash-chart-visitor>
            </Col>

            <Col :lg="12" :md="12" :sm="24" :xs="24">
            <h4 style="margin-left: 0">年累计排行</h4>
            <i-table height="230" :columns="columns1" :data="data2"></i-table>
            </Col>
        </Row>


        <div class="title-label" style="margin-top:30px">各省公司划分</div>
        <Row :gutter="16" style="background: #fff;padding: 30px 20px">
            <Col :lg="12" :md="12" :sm="24" :xs="24">
            <h4 style="color: #fff">各省公司划分</h4>
                <dash-chart-map></dash-chart-map>
            </Col>

            <Col :lg="12" :md="12" :sm="24" :xs="24">
            <h4 style="margin-left: 0">年累计排行</h4>
            <i-table height="425" :columns="columns1" :data="data2"></i-table>
            </Col>
        </Row>
    </div>
</template>

<script>
    import DashChartVisitor from './charts/DashChartVisitor';
    import DashChartMap from './charts/DashChartMap';

    export default {
        components: {DashChartVisitor,DashChartMap},
        name: 'dashboard',
        data() {
            return {
                findType:1,
                findTypeList:[
                    {
                        type:1,
                        name:'毛利'
                    },{
                        type:2,
                        name:'净发'
                    },{
                        type:3,
                        name:'码洋'
                    },
                ],
                options1: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                date: "",
                columns1: [
                    {
                        title: '书名',
                        key: 'bookName'
                    },
                    {
                        title: '毛利',
                        key: 'grossMargin',
                        sortable: true      //支持升序降序
                    },
                    {
                        title: '净发',
                        key: 'count',
                        sortable: true
                    },
                    {
                        title: '产品经理',
                        key: 'manager'      //支持升序降序
                    }
                ],
                data2: [
                    {
                        bookName: '苗疆蛊事',
                        grossMargin: 18,
                        count: 40000,
                        manager: '小赵'
                    },
                    {
                        bookName: '君子长诀',
                        grossMargin: 18,
                        count: 900,
                        manager: '小钱'
                    },
                    {
                        bookName: '你在心上，爱情那么长',
                        grossMargin: 18,
                        count: 1333,
                        manager: '小孙'
                    },
                    {
                        bookName: '三生：神仙债',
                        grossMargin: 18,
                        count: 3000,
                        manager: '小李'
                    },
                    {
                        bookName: '秀色可餐：夫君请笑纳',
                        grossMargin: 18,
                        count: 60000,
                        manager: '小周'
                    },
                    {
                        bookName: '我的绝色总裁未婚妻',
                        grossMargin: 18,
                        count: 800,
                        manager: '小吴'
                    },
                    {
                        bookName: '合租医仙',
                        grossMargin: 18,
                        count: 2000,
                        manager: '小正'
                    },
                    {
                        bookName: '她与黑夜尽缠绵',
                        grossMargin: 18,
                        count: 30000,
                        manager: '小王'
                    }
                ]
            }
        },
        methods: {
            find(){
                if(this.date.length === 0  || this.date[0] === null){
                    this.$Message.error("请选择时间区间")
                }else {
                    this.$Message.success("搜索成功")
                }
            }
        },
        mounted() {
            const token = this.$store.getters.token;
        }
    }
</script>

<style type="text/css" scoped>
    .code-row-bg {
        color: #fff;
    }
    .state-value .value {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 5px
    }
    .state-value .title {
        font-size: 14px
    }
    .state-value {
        width: 100%;
        display: inline-block;
    }
    .panel {
        border-radius: 4px;
        padding: 20px 20px;
    }
    .panel.purple {
        background: #6a8abe;
    }
    .panel.red {
        background-color: #fc8675;
    }
    .panel.green {
        background: #4acacb;
    }
    .panel.pink {
        background: #9587cb;
    }
    .panel.blue {
        background: #4b9ccb;
    }
    .panel.mauve {
        background: #bd89d6;
    }
    .animated {
        background-color: #eff0f4;
        overflow: hidden;
    }
    .panel {
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
    }
    .title-label{
        padding: 15px 40px;
        background: #fff;
        font-size: 1.5rem;
        display: inline-block;
    }
    li {
        margin-bottom: 11px;
        margin-left: 10px;
        margin-right: 10px
    }
    h3, h4, h5 {
        margin: 12px
    }
    p {
        margin: 12px
    }
</style>